import React from 'react'
import orders from '../../../assets/css/user/orders/orders.module.css'
import {Modal} from "antd-mobile";

export default class OrdersIndex extends React.Component {
    constructor(){
        super();
        this.state={
            list:[]
        }
    }
    componentWillMount() {
        this.getData();
    }
    getData(){
        let uid=localStorage.uid;
        fetch("http://vueshop.glbuys.com/api/user/myorder/index?uid="+uid+"&status=all&token=1ec949a15fb709370f&page=1")
            .then(res=>{
                return res.json()
            }).then(res=>{
            if(res.code===200){
                this.setState({list:res.data})
            }
        })
    }
    del(index){
        const alert = Modal.alert;
        alert('', '确认要删除吗', [
            { text: '取消', onPress: () => console.log('cancel') },
            { text: '确认', onPress: () => {
                    let ordernum=this.state.list[index].ordernum;
                    fetch('http://vueshop.glbuys.com/api/user/myorder/clearorder?uid='+localStorage['uid']+'&ordernum='+ordernum+'&token=1ec949a15fb709370f ')
                        .then((res)=>res.json())
                        .then(res=>{
                            if(res.code===200){
                                this.getData();
                                this.props.history.go();
                            }
                        })
                }}
        ])
    }
    goPay(index){
        let ordernum=this.state.list[index].ordernum;
        fetch('http://vueshop.glbuys.com/api/user/myorder/finalorder?uid='+localStorage['uid']+'&ordernum='+ordernum+'&token=1ec949a15fb709370f')
            .then((res)=>res.json())
            .then(res=>{
                if(res.code===200){
                    this.getData();
                    this.props.history.go();
                }
            })
    }

    render() {
        return(
            <div>
                <ul className={orders.boxOrders}>
                    {this.state.list.map((item,index)=>{
                        return(
                            <li key={index}>
                                <div className={orders.boxDiv}>
                                    <p>订单编号：<span>{item.ordernum}</span></p>
                                    <p>
                                        <span style={item.status==='0'?{display:"block"}:{display:"none"}}>待付款</span>
                                        <span style={item.status==='0'?{display:"none"}:{display:"block"}}>已收货</span>
                                    </p>
                                </div>
                                {item.goods.map((Item,Index)=>{
                                    return(
                                        <div key={Index} className={orders.boxDivOne}>
                                            <img src={Item.image} alt=''/>
                                            <div>
                                                <p>{Item.title}</p>
                                                <span>x{Item.amount}</span>
                                            </div>
                                        </div>
                                    )
                                })}
                                <div className={orders.boxFoot}>
                                    <p>支付金额：<span>￥{item.total}</span></p>
                                    <p style={item.status==='0'?{display:"block"}:{display:"none"}}>
                                        <span onClick={this.del.bind(this,index)}>取消订单</span>
                                        <span onClick={this.goPay.bind(this,index)}>去付款</span>
                                    </p>
                                    <p style={item.status==='2'?{display:"block"}:{display:"none"}}>
                                        <span className={orders.boxSpan}>已收货</span >
                                    </p>
                                </div>
                            </li>
                        )
                    })}
                </ul>
            </div>
        )
    }
}